<template>
    <div>
        <a-button type="primary" @click="visible = true">Open Modal</a-button>
    </div>
    <a-modal v-model:visible="visible" draggable :on-before-ok="handleSubmit" @cancel="visible = false"
        :mask-closable="false">
        <template #title>
            新增坐席账号
        </template>
        <!-- 表单 -->
        <a-form :model="form" ref="formRef" :rules="rules">
            <a-form-item label="Username" field="username">
                <a-input v-model="form.username" placeholder="Please enter your username" />
            </a-form-item>
            <a-form-item label="Email" field="email">
                <a-input v-model="form.email" placeholder="Please enter your email" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script>
export default {
    data() {
        return {
            visible: false,
            form: {
                username: '',
                email: ''
            },
            rules: {
                username: [{ required: true, message: 'Please enter your username' }],
                email: [
                    { required: true, message: 'Please enter your email' },
                    { type: 'email', message: 'Please enter a valid email' },
                ],
            }
        }
    },
    methods: {
        async handleSubmit() {
            var errors = await this.$refs.formRef.validate();
            if (errors === undefined) {
                console.log('Form values:', this.form);
                return true;
            } else {
                return false;
            }
        }
    }
}
</script>